<template>
  <el-dialog title="N1-N2张力架线" :modelValue="visible" :show-close="true" width="70%" @close="$emit('closed')">
    <!-- <template #header="{ close }">
      <div class="lj-header">
        <div class="title">
          <span>N1-N2张力架线</span>
          <div class="small-div">
            <span>小牵张</span>
          </div>
        </div>
        <el-button type="danger" size="small" @click="close"> 关闭</el-button>
      </div>
    </template> -->
    <div class="lj-show-container">
      <!-- header -->
      <div class="header">
        <div class="yinshen">
          <span>牵引绳:{{ power?.config.DaoWire.wireStyle }} </span>
          <span>导引绳:{{ power?.config.QianWire.wireStyle }}</span>
        </div>
        <el-select v-model="show" class="select" @change="" size="small">
          <el-option label="轴向张力" :value="1" />
          <el-option label="水平张力" :value="2" />
          <el-option label="控制受力" :value="3" />
        </el-select>
      </div>
      <!-- table -->
      <TPTable v-if="show === 1" />
      <HITable v-if="show === 2" />
      <!-- 控制点受力 -->
      <ACTable v-if="show === 3" />
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import TPTable from '../table/TPTable.vue'
import HITable from '../table/HITable.vue'
import ACTable from '../table/ACTable.vue'
import useCalculatePower from '@/composables/useCalculatePower'
const { visible, configId } = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  configId: {
    type: Number,
    default: 18,
  },
})
const { find: findPower, power } = useCalculatePower()

const emit = defineEmits(['closed'])
const show = ref(1)

findPower(configId)
</script>

<style scoped lang="scss">
.lj-header {
  @apply flex justify-between items-center;
  .title {
    @apply text-lg grid grid-rows-[1fr_auto];
    .small-div {
      @apply text-xs text-gray-500;
    }
  }
}
.lj-show-container {
  @apply grid grid-rows-[auto_1fr] text-[consolas];
  .header {
    @apply py-1 flex justify-between items-center;
    .yinshen {
      @apply flex gap-2 text-sm;
    }
    .select {
      @apply w-[100px] !important;
    }
  }
}
</style>
